<template>
  <div>
    <el-form @submit.native.prevent :inline="true" :model="params">
      <el-form-item>
        <el-input
          v-model="params.customer_name"
          placeholder="项目名称查询"
          clearable
          @change="getData()"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <select-org-bank
          v-model="params['bank_id.eq']"
          placeholder="选择银行"
          clearable
          @change="getData()"
        ></select-org-bank>
      </el-form-item>
      <el-form-item>
        <el-date-picker
          class="date-picker-ml"
          v-model="datePicked"
          type="daterange"
          align="right"
          unlink-panels
          range-separator="至"
          start-placeholder="提交开始日期"
          end-placeholder="提交结束日期"
          :picker-options="pickerOptions"
          value-format="yyyy-MM-dd"
          @change="handleDateChange"
        ></el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button icon="el-icon-search" @click="getData()">查询</el-button>
      </el-form-item>
      <el-form-item>
        <el-button
          icon="el-icon-download"
          type="primary"
          :loading="exportLoading"
          @click="exportExcel(innterTitle)"
        >
          报表下载
        </el-button>
      </el-form-item>
    </el-form>

    <!-- <h4 class="text-center">{{innterTitle}}</h4> -->
    <manage-panel-normal-table
      v-loading="loading"
      :columns="tableColumns"
      :data="tableData"
    ></manage-panel-normal-table>

    <div class="query-pagination">
      <div></div>
      <el-pagination
        layout="total, prev, pager, next, jumper"
        :current-page.sync="params.index"
        :page-size="params.size"
        :total="totalCount"
        @current-change="getData"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import {
  enumReportType,
  reportTableColumns,
  reportDataAdapter,
} from '@/credit/views/city/report/reportMixins'
import { exportExcel } from '@/credit/mixin/taskTableProvinceUnion'
import { lastPickerShortcuts, nextPickerShortcuts } from '@/common/plugins/tools/date'

import SelectOrgBank from '@/bigcredit/views/program/components/SelectOrgBank'
import ManagePanelNormalTable from '@/credit/views/city/report/ManagePanelNormalTable'

export default {
  components: {
    SelectOrgBank,
    ManagePanelNormalTable,
  },
  props: {
    reportType: Number,
  },
  data() {
    return {
      loading: false,
      params: {
        index: 1,
        size: 10,
        customer_name: '',
        'bank_id.eq': '',
        'is_submit_report.eq': 0,
      },
      order: {},
      tableName: 'market_project',
      totalCount: 0,
      tableData: [],
      tableColumns: reportTableColumns,

      datePicked: [],
      pickerOptions: {
        shortcuts: [...lastPickerShortcuts, ...nextPickerShortcuts],
      },

      exportLoading: false,
    }
  },
  computed: {
    ...mapGetters(['clientId']),
    innterTitle() {
      return enumReportType[this.reportType] + '台账报表'
    },
  },
  watch: {},
  created() {
    this.params['orWhere.service_id.eq'] = this.clientId
    this.params['orWhere.recommend_service.eq'] = this.clientId
    this.params['orWhere.pro_service.eq'] = this.clientId
    this.getData()
  },
  mounted() {},
  methods: {
    async getData(index = 1) {
      this.params.index = index
      this.loading = true
      const [res] = await this.fetchData({ ...this.params, ...this.getParams() })
      this.loading = false
      const data = (res && res.data) || {}
      this.totalCount = data.totalCount || 0
      this.tableData = (data.data || []).map(reportDataAdapter)
    },
    fetchData(params) {
      return this.$utils.promise(
        this.$api.getData(this.$serviceName, this.tableName, params, this.order)
      )
    },
    getParams() {
      switch (this.reportType) {
        // 新增（当月，不是30天）
        case 1: {
          const date = new Date()
          const year = date.getFullYear()
          const month = date.getMonth() + 1
          const lastDay = new Date(year, month, 0).getDate()
          const fullMonth = `${month}`.padStart(2, '0')
          return {
            'load_date.gte': `${year}-${fullMonth}-01`,
            'load_date.lte': `${year}-${fullMonth}-${lastDay} 23:59:59`,
          }
        }
        // 在保
        case 2:
          return {
            'load_beh_status.eq': 1,
          }
        // 解保
        case 3:
          return {
            'load_beh_status.eq': 6,
          }
        // 风险
        case 4:
          return {
            'load_beh_status.in': '2,3,4,5',
          }
        default:
          return {}
      }
    },
    handleDateChange() {
      this.params.index = 1
      if (this.datePicked && this.datePicked.length === 2) {
        this.params['load_date.gte'] = this.datePicked[0]
        this.params['load_date.lte'] = `${this.datePicked[1]} 23:59:59`
      } else {
        this.params['load_date.gte'] = ''
        this.params['load_date.lte'] = ''
      }
      this.getData()
    },
    async exportExcel(filename) {
      this.exportLoading = true
      exportExcel({
        filename,
        tableColumns: this.tableColumns,
        params: { ...this.params, ...this.getParams() },
        dataAdapter: reportDataAdapter,
        fetchData: this.fetchData,
        onLoaded: () => {
          this.exportLoading = false
        },
      })
    },
  },
}
</script>

<style lang="scss" scoped></style>
